<template>
  <div class="indexView">
    <router-view v-slot="{ Component }" v-if="$route.meta.keepAlive">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <router-view v-if="!$route.meta.keepAlive" />
    <PlayBottom :style="{ bottom: $route.meta.index ? '60px' : 0 }" />
    <TabbarView v-if="$route.meta.index" />
    <!-- 播放器 -->
    <van-popup v-model:show="musicStore.playPop" position="bottom"
      :style="{ height: '100%', width: '100%', background: 'white' }">
      <CDView @cgeTime="changeTime" />
    </van-popup>
    <audio ref="video" @timeupdate="updateTime" :src="`https://music.163.com/song/media/outer/url?id=${musicStore.playList[musicStore.playIndx].id
    }.mp3`"></audio>
  </div>
</template>

<script setup>
import TabbarView from "./TabbarView.vue";
import PlayBottom from "./PlayBottom.vue";
import CDView from "./components/CDView";
import { useMusicStore } from "@/store/store.js";
import { ref, watch, nextTick } from "vue";
const musicStore = useMusicStore();
const video = ref({});
const updateTime = () => {
  musicStore.changeCurrentTime(video.value.currentTime, video.value.duration);
};
const changeTime = (value) => {
  video.value.currentTime = value
}
watch(
  () => [musicStore.playIndx, musicStore.playList, musicStore.playReady],
  () => {
    if (musicStore.playReady) {
      nextTick(() => {
        video.value.play();
      });
    } else {
      nextTick(() => {
        video.value.pause();
      });
    }
  }, {
  deep: true
}
);
</script>

<style scoped lang="less">
</style>
